<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>会员注册</title>
    <meta name="viewport" content="user-scalable=no">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" href="static/weixin/plug/weui/css/weui.css">
    <link rel="stylesheet" href="static/weixin/plug/weui/css/jquery-weui.css">
    <link rel="stylesheet" type="text/css" href="static/weixin/css/common.css">
    <link rel="stylesheet" href="static/weixin/plug/icalendar/lCalendar.css">
    <script type="text/javascript" src="static/weixin/js/myJs.js"></script>
</head>

<body>
<!-- <p class="login_title"></p> -->
<form action="weixin/vip/register" name="Form" id="Form" method="post">
    <input type="hidden" name="openid" id="openid" value="${pd.openid}"/>
    <div class="login_list">
        <span>姓名</span>
        <input type="text" name="name" placeholder="请输入姓名">
    </div>
    <div class="login_list">
        <span>出生日期</span>
        <input type="text" data-toggle='date' id="my-input" onfocus="this.blur();" readonly="true" placeholder="请选择出生日期"
               name="csrq"/>
    </div>
    <div class="login_list">
        <span>手机号</span>
        <input type="text" name="sjh" id="sjh" type="number" maxlength="11" pattern="[0-9]*" placeholder="请输入手机号">
    </div>
    <div class="login_list1">
        <span>验证码</span>
        <input type="number" pattern="[0-9]*" v-model="login_info.verification" id="verification" placeholder="请输入验证码"
               maxlength="6">
        <label id="verification_btn" class="weui-btn weui-btn_plain-primary">获取验证码</label>
    </div>
    <div class="login_btn">
        <input class="weui-btn weui-btn_primary" type="submit" onclick="return checkNull()" value="注 册">
    </div>
</form>
<p class="login_bound">
    <a href="./weixin/vip/goBind">
        已有会员？去绑定>>
    </a>
</p>
<script type="text/javascript" src="static/weixin/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="static/weixin/plug/weui/js/jquery-weui.js"></script>
<script src="static/weixin/plug/icalendar/lCalendar.js"></script>
<script type="text/javascript">
    var randomNum;
    $(function () {
        //$.toast.prototype.defaults.duration = 20000
        var calendar = new lCalendar();
        calendar.init({
            'trigger': '#my-input',
            'type': 'date'
        });

        $("#verification_btn").on("click", function () {
            if ($("#sjh").val().length != 11) {
                $.toast("请输入有效的手机号码！", "text");
                return false;
            }
            var _this = this;
            if ($(this).hasClass('weui-btn_plain-disabled')) {
                $.toast("请一分钟后再次获取验证码", "text");
            } else {
                $.ajax({
                    type: "post",
                    url: '<%=basePath%>weixin/vip/sendMsg?tm=' + new Date().getTime(),
                    data: {sjh: $("#sjh").val()},
                    dataType: 'json',
                    cache: false,
                    success: function (data) {
                        console.log(data);
                        if (data.result.success) {
                            randomNum = data.randomNum;
                            $.toast("发送成功", "text");
                            settime($("#verification_btn"));
                        } else {
                            randomNum = data.randomNum;
                            $.toast(data.result.msg, "text");
                        }
                    },
                    error: function () {
                        $.toast("程序异常", "text");
                        return;
                    }
                });
            }
        })
    })
    var countdown = 60;

    function settime(obj) { //获取验证码倒计时
        if (countdown == 0) {
            obj.removeClass("weui-btn_plain-disabled").html("获取验证码");
            countdown = 60;
            return;
        } else {
            obj.addClass("weui-btn_plain-disabled");
            obj.html("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function () {
                settime(obj)
            }
            , 1000)
    }

    function checkNull() {
        var rs = true;
        $("input").each(function (n) {
            if ($(this).val() == "") {
                $(this).attr("class", "invalid");
                rs = false;
            }
        });
        if (!rs) return rs;
        if (randomNum != $("#verification").val()) {
            rs = false;
            $.toast("验证码错误", "text");
        }
        return rs;
    }
</script>
</body>
</html>
